<template>
    <div class="right2">
      <div class="bt">
        <div class="tit1">作物长势</div>
      </div>
      <div class="partRightTwo" ref="chartDom" ></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";

const chartDom = ref(null)
onMounted(() => {
  const myChart = echarts.init(chartDom.value);

  const option = {
    tooltip: {
      trigger: 'axis', //坐标轴触发，主要应用折线图，柱状图
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['2022.07','2022.08','2022.09'], //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
      textStyle: {
        color: '#fff'
      },
    },
    grid: {/*直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。*/
      left: '5%',//grid 组件离容器距离
      right: '8%',
      bottom: '15%',
      containLabel: true, //grid 区域是否包含坐标轴的刻度标签。
    },
    xAxis: [//直角坐标系 grid 中的 x 轴
      {
        type: 'category',//坐标轴类型，
        boundaryGap:false,//折线整体留白
        data: ['差','较差','正常','较好','好'],
        axisLabel: {
          color: '#fff'//给x轴的数字上白色
        }
      }
    ],
    yAxis: {//直角坐标系 grid 中的 y 轴
      name:'单位：亩',
      type: 'value',//坐标轴，数值轴适用于连续数据
      axisLabel: {
        color:'rgba(255,255,255,0.96)'//给y轴的数字上白色
      },
      splitLine:{
        show:false,
      }
    },
    series: [
      {
        name: '2022.07',
        type: 'line',
        stack: 'Total',
        areaStyle: {
        },//覆盖折线区域的面积
        emphasis: {
          focus: 'series'
        },
        data: [163, 221, 101, 134, 90, 230, 310]
      },
      {
        name: '2022.08',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [186, 210, 321, 387, 590, 421, 511]
      },
      {
        name: '2022.09',
        type: 'line',
        stack: 'Total',
        label: {
          position: 'top'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [245, 232, 201, 254, 190, 730, 410]
      },
    ]
  };
  myChart.setOption(option);
})

</script>

<style lang="scss" scoped>
.partRightTwo{
  height: 100%;
  margin: 25px auto auto auto;
  width: 100%
}
.right2{
  width: 25%;
  height: calc(100%/3 - 57px);
  background-image: url(@/assets/img/backg1.png);
  background-size: 100% 100%;
  position: fixed;
  top: calc(100%/3 + 61px);
  float: left;
}
.bt{
  width: calc(100% - 24px);
  height: 40px;
  margin-left: 24px;
  float: left;
  line-height: 40px;
}
.tit1{
  width: auto;
  height: 40px;
  padding-right: 4px;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(to top,#78bcf7 ,#f9fcff);
  -webkit-background-clip: text;
  color: transparent;
  float: left;
  /*定义文本颜色为透明*/
}

</style>